<template>
	<view class="column-css">
		<view class="row-css" style="justify-content: space-between;padding: 10rpx 20rpx;">
			<view style="background: #f6f6f6;">证件已上传</view>
			<view style="background: #f6f6f6;">{{ certificatInfo.uploadNum }}/{{ certificatInfo.total }}</view>
		</view>
		<view class="column-css" style="background: #FFFFFF;padding: 10rpx 0;">
			<view class="row-css" style="justify-content: space-between;padding: 0 20rpx;">
				<view>行驶证正页</view>
				<view :style="{ color: cerstauscolor(certificatInfo.drivingLicenseState) }">{{ cerState(certificatInfo.drivingLicenseState) }}</view>
			</view>
			<view class="column-css" style="align-items: center;">
				<image
					style="margin: 20rpx;width: 470rpx;height: 290rpx;"
					mode="aspectFit"
					:src="certificatInfo.drivingLicense == '' ? carmeimage : certificatInfo.drivingLicense"
					@tap="chooseImage(1)"
				></image>
				<view v-if="certificatInfo.drivingLicenseState != 0" style="color: #C0C0C0;">点击图片更新({{ cerState(certificatInfo.drivingLicenseState) }})</view>
				<view v-else style="color: #C0C0C0;">点击相机进行上传({{ cerState(certificatInfo.drivingLicenseState) }})</view>
				<!-- <view style="color: #C0C0C0;padding: 10rpx 0;">点击图片更新证件(已过期)</view>
				<view style="color: #C0C0C0;padding: 10rpx 0;">点击图片上传证件(未上传)</view> -->
			</view>
		</view>
		
		<view class="column-css" style="background: #FFFFFF;padding: 10rpx 0;">
			<view class="row-css" style="justify-content: space-between;padding: 0 20rpx;">
				<view>行驶证副页</view>
				<view :style="{ color: cerstauscolor(certificatInfo.vehicleLicenseDeputyState) }">{{ cerState(certificatInfo.vehicleLicenseDeputyState) }}</view>
			</view>
			<view class="column-css" style="align-items: center;">
				<image
					style="margin: 20rpx;width: 470rpx;height: 290rpx;"
					mode="aspectFit"
					:src="certificatInfo.vehicleLicenseDeputy == '' ? carmeimage : certificatInfo.vehicleLicenseDeputy"
					@tap="chooseImage(2)"
				></image>
				<view v-if="certificatInfo.vehicleLicenseDeputyState != 0" style="color: #C0C0C0;">点击图片更新({{ cerState(certificatInfo.vehicleLicenseDeputyState) }})</view>
				<view v-else style="color: #C0C0C0;">点击相机进行上传({{ cerState(certificatInfo.vehicleLicenseDeputyState) }})</view>
				<!-- <view style="color: #C0C0C0;padding: 10rpx 0;">点击图片更新证件(已过期)</view>
				<view style="color: #C0C0C0;padding: 10rpx 0;">点击图片上传证件(未上传)</view> -->
			</view>
		</view>
		<view class="column-css" style="background: #FFFFFF;padding: 10rpx 0;margin-top: 10rpx;">
			<view class="row-css" style="justify-content: space-between;padding: 0 20rpx;">
				<view>道路运输证正页</view>
				<view :style="{ color: cerstauscolor(certificatInfo.rtcState) }">{{ cerState(certificatInfo.rtcState) }}</view>
			</view>
			<view class="column-css" style="align-items: center;">
				<image
					style="margin: 20rpx;width: 470rpx;height: 290rpx;"
					mode="aspectFit"
					:src="certificatInfo.rtc == '' ? carmeimage : certificatInfo.rtc"
					@tap="chooseImage(3)"
				></image>
				<view v-if="certificatInfo.rtcState != 0" style="color: #C0C0C0;">点击图片更新({{ cerState(certificatInfo.rtcState) }})</view>
				<view v-else style="color: #C0C0C0;">点击相机进行上传({{ cerState(certificatInfo.rtcState) }})</view>
				<!-- <view style="color: #C0C0C0;padding: 10rpx 0;">点击图片更新证件(已过期)</view>
				<view style="color: #C0C0C0;padding: 10rpx 0;">点击图片上传证件(未上传)</view> -->
			</view>
		</view>
		<view class="column-css" style="background: #FFFFFF;padding: 10rpx 0;margin-top: 10rpx;display: none;">
			<view class="row-css" style="justify-content: space-between;padding: 0 20rpx;">
				<view>道路运输证副页</view>
				<view :style="{ color: cerstauscolor(certificatInfo.rtcDeputyState) }">{{ cerState(certificatInfo.rtcDeputyState) }}</view>
			</view>
			<view class="column-css" style="align-items: center;">
				<image
					style="margin: 20rpx;width: 470rpx;height: 290rpx;"
					mode="aspectFit"
					:src="certificatInfo.rtcDeputy == '' ? carmeimage : certificatInfo.rtcDeputy"
					@tap="chooseImage(4)"
				></image>
				<view v-if="certificatInfo.rtcDeputyState != 0" style="color: #C0C0C0;">点击图片更新({{ cerState(certificatInfo.rtcDeputyState) }})</view>
				<view v-else style="color: #C0C0C0;">点击相机进行上传({{ cerState(certificatInfo.rtcDeputyState) }})</view>
				<!-- <view style="color: #C0C0C0;padding: 10rpx 0;">点击图片更新证件(已过期)</view>
				<view style="color: #C0C0C0;padding: 10rpx 0;">点击图片上传证件(未上传)</view> -->
			</view>
		</view>
		<uni-popup ref="popup" type="bottom" mask-background-color="rgba(0,0,0,0.8)">
			<view class="popup-wrap">
				<view class="popup-describe">
					<image v-if="index == 1" :src="img_url + '/icon_example_car01.png'" mode="aspectFit"></image>
					<image v-if="index == 2" src="../../static/icon_example_car02.png" mode="aspectFit"></image>
					<image v-if="index == 3" src="../../static/icon_example_road.png" mode="aspectFit"></image>
					<view>
						<view class="title">{{title}}</view>
						<view class="desc">
							<view>保证证件四角可见，无遮挡，无反光；</view>
							<view>{{desc}}</view>
						</view>
					</view>
				</view>
				<view class="popup-box">
					<view @click="onCamera(0)">拍照</view>
					<view @click="onCamera(1)">从相册选择</view>
				</view>
				<view class="popup-cancel" @click="onCancel">取消</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			img_url: this.$img_url,
			vehicleId: '',
			certificatInfo: {},
			carmeimage: '../../static/icon_carmer.png',
			index: null,
			title: '',
			desc: '',
			etpId:''
		};
	},
	onLoad(options) {
		this.vehicleId = options.vehicleId;
		this.getvehCertificat();
	},
	methods: {
		getvehCertificat() {
			this.wxRequest({
				url: `${this.API}/driverService/vehicleCertificat`,
				method: 'POST',
				data: {
					vehicleId: this.vehicleId,
					etpId:uni.getStorageSync(this.DATA_KEY.etpId)
				},
				title: '加载中...',
				success: res => {
					this.certificatInfo = res.data.data;
				}
			});
		},
		cerState: function(staus) {
			let stats = '';
			switch (staus) {
				case '0':
					stats = '未上传';
					break;
				case '1':
					stats = '已上传';
					break;
				case '2':
					stats = '已过期';
					break;
			}
			return stats;
		},
		cerstauscolor: function(staus) {
			let color = '#E04B28';
			if (staus == '1') {
				color = '#4CD964';
			}
			return color;
		},
		chooseImage: async function(index) {
			this.index = index
			this.$refs.popup.open()
			if(this.index == 1) {
				this.title = '请上传车辆行驶证正页照片'
				this.desc = '号码号牌、车辆类型等信息，文字清晰可辩'
			} else if(this.index == 2) {
				this.title = '请上传车辆行驶证副页照片'
				this.desc = '号码号牌、车辆类型等信息，文字清晰可辩'
			} else if(this.index == 3) {
				this.title = '请上传道路运输证照片'
				this.desc = '运输证号等信息，文字清晰可辩'
			} 
			return
			// TODO 选择相机或相册时 需要弹出actionsheet，目前无法获得是相机还是相册，在失败回调中处理
			uni.chooseImage({
				count: 1,
				sizeType:'compressed',
				success: res => {
					uni.showLoading({
						title: '上传中'
					});
					if (index == 1) {
						uni.uploadFile({
							url: `${this.API}/driverService/uploadDrivingLicenseChange`,
							fileType: 'image',
							name: 'file',
							filePath: res.tempFilePaths[0],
							file: res.tempFiles,
							header: {
								'Content-Type': 'multipart/form-data;boundary=ebf9f03029db4c2799ae16b5428b06bds',
								Authorization: uni.getStorageSync(this.DATA_KEY.token)
							},
							formData: {
								fileType: '6',
								fileId: Math.floor(Math.random() * 1259),
								ocrOrNot: '1',
								vehicleId: this.vehicleId
							},
							success: res => {
								console.log('行驶证: ', JSON.parse(res.data));
								let respost = JSON.parse(res.data);
								uni.hideLoading();
								if (respost.code == 0) {
									this.getvehCertificat();
								} else {
									uni.showToast({
										title: respost.msg,
										icon: 'none'
									});
								}
							},
							fail: error => {
								uni.showToast({
									title: '文件上传失败',
									icon: 'none'
								});
							}
						});
					} else if (index == 2) {
						uni.uploadFile({
							url: `${this.API}/driverService/uploadDrivingLicenseUpdateChangeDeputy`,
							fileType: 'image',
							name: 'file',
							filePath: res.tempFilePaths[0],
							file: res.tempFiles,
							header: {
								'Content-Type': 'multipart/form-data;boundary=ebf9f03029db4c2799ae16b5428b06bds',
								Authorization: uni.getStorageSync(this.DATA_KEY.token)
							},
							formData: {
								fileType: '6',
								fileId: Math.floor(Math.random() * 1259),
								ocrOrNot: '1',
								vehicleId: this.vehicleId
							},
							success: res => {
								console.log('行驶证副页: ', JSON.parse(res.data));
								let respost = JSON.parse(res.data);
								uni.hideLoading();
								if (respost.code == 0) {
									this.getvehCertificat();
								} else {
									uni.showToast({
										title: respost.msg,
										icon: 'none'
									});
								}
							},
							fail: error => {
								uni.showToast({
									title: '文件上传失败',
									icon: 'none'
								});
							}
						});
					} else if (index == 3) {
						uni.uploadFile({
							url: `${this.API}/driverService/uploadRtcChange`,
							fileType: 'image',
							name: 'file',
							filePath: res.tempFilePaths[0],
							file: res.tempFiles,
							header: {
								'Content-Type': 'multipart/form-data;boundary=ebf9f03029db4c2799ae16b5428b06bds',
								Authorization: uni.getStorageSync(this.DATA_KEY.token)
							},
							formData: {
								fileType: '6',
								fileId: Math.floor(Math.random() * 1259),
								ocrOrNot: '1',
								vehicleId: this.vehicleId
							},
							success: res => {
								console.log('道路运输证: ', JSON.parse(res.data));
								let respost = JSON.parse(res.data);
								uni.hideLoading();
								if (respost.code == 0) {
									this.getvehCertificat();
								} else {
									uni.showToast({
										title: respost.msg,
										icon: 'none'
									});
								}
							},
							fail: error => {
								uni.showToast({
									title: '文件上传失败',
									icon: 'none'
								});
							}
						});
					} else if (index == 4) {
						uni.uploadFile({
							url: `${this.API}/driverService/uploadRtcChangeDeputy`,
							fileType: 'image',
							name: 'file',
							filePath: res.tempFilePaths[0],
							file: res.tempFiles,
							header: {
								'Content-Type': 'multipart/form-data;boundary=ebf9f03029db4c2799ae16b5428b06bds',
								Authorization: uni.getStorageSync(this.DATA_KEY.token)
							},
							formData: {
								fileType: '6',
								fileId: Math.floor(Math.random() * 1259),
								ocrOrNot: '1',
								vehicleId: this.vehicleId
							},
							success: res => {
								console.log('道路运输证副页: ', JSON.parse(res.data));
								let respost = JSON.parse(res.data);
								uni.hideLoading();
								if (respost.code == 0) {
									this.getvehCertificat();
								} else {
									uni.showToast({
										title: respost.msg,
										icon: 'none'
									});
								}
							},
							fail: error => {
								uni.showToast({
									title: '文件上传失败',
									icon: 'none'
								});
							}
						});
					}
				}
			});
		},
		onCancel(){
			this.$refs.popup.close()
		},
		onCamera(num) {
			let sourceType
			num === 0 ? sourceType = ['camera'] : sourceType = ['album'] 
			let index = this.index
			this.$refs.popup.close()
			uni.chooseImage({
				count: 1,
				sourceType: sourceType,
				sizeType: 'compressed',
				success: res => {
					uni.showLoading({
						title: '上传中'
					});
					if (index == 1) {
						uni.uploadFile({
							url: `${this.API}/driverService/uploadDrivingLicenseChange`,
							fileType: 'image',
							name: 'file',
							filePath: res.tempFilePaths[0],
							file: res.tempFiles,
							header: {
								'Content-Type': 'multipart/form-data;boundary=ebf9f03029db4c2799ae16b5428b06bds',
								Authorization: uni.getStorageSync(this.DATA_KEY.token)
							},
							formData: {
								fileType: '6',
								fileId: Math.floor(Math.random() * 1259),
								ocrOrNot: '1',
								vehicleId: this.vehicleId
							},
							success: res => {
								console.log('行驶证: ', JSON.parse(res.data));
								let respost = JSON.parse(res.data);
								uni.hideLoading();
								if (respost.code == 0) {
									this.getvehCertificat();
								} else {
									uni.showToast({
										title: respost.msg,
										icon: 'none'
									});
								}
							},
							fail: error => {
								uni.showToast({
									title: '文件上传失败',
									icon: 'none'
								});
							}
						});
					} else if (index == 2) {
						uni.uploadFile({
							url: `${this.API}/driverService/uploadDrivingLicenseUpdateChangeDeputy`,
							fileType: 'image',
							name: 'file',
							filePath: res.tempFilePaths[0],
							file: res.tempFiles,
							header: {
								'Content-Type': 'multipart/form-data;boundary=ebf9f03029db4c2799ae16b5428b06bds',
								Authorization: uni.getStorageSync(this.DATA_KEY.token)
							},
							formData: {
								fileType: '6',
								fileId: Math.floor(Math.random() * 1259),
								ocrOrNot: '1',
								vehicleId: this.vehicleId
							},
							success: res => {
								console.log('行驶证副页: ', JSON.parse(res.data));
								let respost = JSON.parse(res.data);
								uni.hideLoading();
								if (respost.code == 0) {
									this.getvehCertificat();
								} else {
									uni.showToast({
										title: respost.msg,
										icon: 'none'
									});
								}
							},
							fail: error => {
								uni.showToast({
									title: '文件上传失败',
									icon: 'none'
								});
							}
						});
					} else if (index == 3) {
						uni.uploadFile({
							url: `${this.API}/driverService/uploadRoadTransportCertificateChange`,
							fileType: 'image',
							name: 'file',
							filePath: res.tempFilePaths[0],
							file: res.tempFiles,
							header: {
								'Content-Type': 'multipart/form-data;boundary=ebf9f03029db4c2799ae16b5428b06bds',
								Authorization: uni.getStorageSync(this.DATA_KEY.token)
							},
							formData: {
								fileType: '6',
								fileId: Math.floor(Math.random() * 1259),
								ocrOrNot: '1',
								vehicleId: this.vehicleId
							},
							success: res => {
								console.log('道路运输证: ', JSON.parse(res.data));
								let respost = JSON.parse(res.data);
								uni.hideLoading();
								if (respost.code == 0) {
									this.getvehCertificat();
								} else {
									uni.showToast({
										title: respost.msg,
										icon: 'none'
									});
								}
							},
							fail: error => {
								uni.showToast({
									title: '文件上传失败',
									icon: 'none'
								});
							}
						});
					} else if (index == 4) {
						uni.uploadFile({
							url: `${this.API}/driverService/uploadRtcChangeDeputy`,
							fileType: 'image',
							name: 'file',
							filePath: res.tempFilePaths[0],
							file: res.tempFiles,
							header: {
								'Content-Type': 'multipart/form-data;boundary=ebf9f03029db4c2799ae16b5428b06bds',
								Authorization: uni.getStorageSync(this.DATA_KEY.token)
							},
							formData: {
								fileType: '6',
								fileId: Math.floor(Math.random() * 1259),
								ocrOrNot: '1',
								vehicleId: this.vehicleId
							},
							success: res => {
								console.log('道路运输证副页: ', JSON.parse(res.data));
								let respost = JSON.parse(res.data);
								uni.hideLoading();
								if (respost.code == 0) {
									this.getvehCertificat();
								} else {
									uni.showToast({
										title: respost.msg,
										icon: 'none'
									});
								}
							},
							fail: error => {
								uni.showToast({
									title: '文件上传失败',
									icon: 'none'
								});
							}
						});
					}
				},
				fail: (err) => {
					console.log(err)
				}
			})
		},
	}
};
</script>

<style lang="scss">
	.popup-wrap{
		// padding: 0 24rpx calc(24rpx + env(safe-area-inset-bottom));
		padding: 0 24rpx calc(24rpx);
		color: #007aff;
		text-align: center;
		background: transparent;
		.popup-describe{
			color: #fff;
			position: absolute;
			top: -55vh;
			left: 50%;
			transform: translate(-50%, 0);
			.title{
				margin: 24rpx 0;
				font-size: 36rpx;
			}
			.desc{
				font-size: 24rpx;
			}
		}
		.popup-box{
			background: #fff;
			margin-bottom: 24rpx;
			border-radius: 8rpx;
			view{
				padding: 24rpx 0;
				&:first-child{
					border-bottom: 1rpx solid #f9f9f9;
				}
			}
		}
		.popup-cancel{
			background: #fff;
			padding: 24rpx 0;
			border-radius: 8rpx;
		}
	}
.row-css {
	display: flex;
	flex-direction: row;
}

.column-css {
	display: flex;
	flex-direction: column;
}

.view-ceritfi {
	background: #ffffff;
	margin-top: 1rpx;
	padding: 20rpx;
	justify-content: space-between;
}

.view-centen-text {
}

.view-cent {
}
</style>
